div {
  box-sizing: border-box;
  border: solid;
  font-size: 3rem;
}

.row {
  display: flex;
  flex-wrap: wrap;

  @each $i in (flex-start, flex-end, center, stretch, baseline) {
    &.row-y-#{$i} {
      align-items: $i;
    }
  }
  @each $i
    in (flex-start, flex-end, center, space-around, space-between, space-evenly)
  {
    &.row-x-#{$i} {
      justify-content: $i;
    }
  }
  .col {
    // flex: 1 0 auto;
    flex: 0 0 100%; // 移动优先

    // 正常12栅格布局
    @for $i from 1 to 13 {
      &.col-#{$i} {
        flex: 0 0 ($i / 12 * 100%);
      }
    }

    // 断点
    /* 超小屏幕 .col-xs- */
    @media only screen and (max-width: 768px) {
      @for $i from 1 to 13 {
        &.col-xs-#{$i} {
          flex: 0 0 ($i / 12 * 100%);
        }
      }
    }
    /* 平板 .col-sm- */
    @media only screen and (min-width: 768px) {
      @for $i from 1 to 13 {
        &.col-sm-#{$i} {
          flex: 0 0 ($i / 12 * 100%);
        }
      }
    }
    /* pc .col-md- */
    @media only screen and (min-width: 992px) {
      @for $i from 1 to 13 {
        &.col-md-#{$i} {
          flex: 0 0 ($i / 12 * 100%);
        }
      }
    }
    /* 大屏 .col-lg- */
    @media only screen and (min-width: 1200px) {
      @for $i from 1 to 13 {
        &.col-lg-#{$i} {
          flex: 0 0 ($i / 12 * 100%);
        }
      }
    }
  }
}
